<template>
  <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
           label-width="140px">

    <div class="dizhi_form_item_view">
      <el-form-item label="抗震设防等级">
        <el-radio-group v-model="currentRow.kangZhenLevel">
          <el-radio-button v-for="item in EnumKangZhenLevelList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="防洪标准">
        <el-radio-group v-model="currentRow.fangHongBiaoZhun">
          <el-radio-button v-for="item in EnumFangHongBiaoZhunList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="其他防洪标准" prop="fangHongOther" v-if="currentRow.fangHongBiaoZhun === 6">
        <el-input v-model="currentRow.fangHongOther" clearable placeholder="请描述其他防洪标准"></el-input>
      </el-form-item>

      <div class="geology-children-dizhi">
        服役区气候
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="年均最大降雨量:" prop="yearRain">
            <el-input v-model="currentRow.yearRain" type="number" clearable placeholder="">
              <template slot="append"><span style="font-size: 15px">mm</span></template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日最大降雨量:" prop="dailyRain">
            <el-input v-model="currentRow.dailyRain" type="number" clearable placeholder="">
              <template slot="append"><span style="font-size: 15px">mm</span></template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="geology-children-dizhi">
        历史灾害信息
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="是否有历史灾害信息" label-width="180px">
            <el-radio-group v-model="currentRow.hasHistory">
              <el-radio-button v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="历史灾害时间" prop="buildTime" v-if="currentRow.hasHistory === 1">
            <el-date-picker
              v-model="currentRow.historyTime"
              type="date"
              placeholder="请选择">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="currentRow.hasHistory === 1">
        <el-row >
          <el-col :span="12">
            <el-form-item label="发生灾害类型">
              <el-radio-group v-model="currentRow.historyDamageType">
                <el-radio-button v-for="item in EnumHappenDamageTypeList" :key="item.code" :label="item.code">{{item.name}}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他灾害" label-width="100px" prop="historyDamageOther" v-if="currentRow.historyDamageType === 4">
              <el-input v-model="currentRow.historyDamageOther" clearable placeholder="灾害名称">
                <template slot="append"><span style="font-size: 15px">破坏</span></template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="" prop="damageVolume" label-width="50px">
              <el-input v-model="currentRow.damageVolume" clearable  type="number">
                <template slot="prepend"><span style="font-size: 15px">灾害体体积</span></template>
                <template slot="append"><span style="font-size: 15px">m³</span></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="" label-width="50px" prop="damageLength">
              <el-input v-model="currentRow.damageLength" clearable  type="number">
                <template slot="prepend"><span style="font-size: 15px">长</span></template>
                <template slot="append"><span style="font-size: 15px">米</span></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="" label-width="50px" prop="damageWidth">
              <el-input v-model="currentRow.damageWidth" clearable  type="number">
                <template slot="prepend"><span style="font-size: 15px">宽</span></template>
                <template slot="append"><span style="font-size: 15px">米</span></template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </div>

  </el-form>
</template>
<script>

import ItemMixins from "./item.mixins";
import Enums from '@/utils/enums'

export default {
  props: ['value', 'isLook'],
  mixins: [ItemMixins,Enums],
  data() {
    return {
      EnumDiBiaoShuiTiList: [],
      EnumGroundwaterInfoList: [],
      EnumZhiBeiFaYuList: [],
      EnumBuLiangDiZhiList: [],
      EnumConstructionList: [],
      EnumRockHardList: [],
      EnumJieGouMianList: [],

      EnumKangZhenLevelList: [],
      EnumFangHongBiaoZhunList: [],
      EnumSysBooleanList: [],
      EnumHappenDamageTypeList: [],
    }
  },
  computed: {
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    cleanData(type) {
      if (type === 4) {
        this.currentRow.structure = ''
        this.currentRow.structureSide = ''
        this.currentRow.hasRiver = 0
      } else {
        this.currentRow.hasRiver = ''
        this.currentRow.riverType = ''
      }

    },
    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    this.queryDictList(['EnumKangZhenLevel', 'EnumFangHongBiaoZhun', 'EnumSysBoolean','EnumHappenDamageType'],
      ['EnumKangZhenLevelList', 'EnumFangHongBiaoZhunList', 'EnumSysBooleanList','EnumHappenDamageTypeList']);
  }
}
</script>

<style lang="less">
  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;

  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .geology-children-dizhi {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #1990FE;
    font-weight: 600;
  }

  .dizhi_form_item_view .el-form-item {
    /*margin-bottom: 5px;*/
  }
</style>
